// 渲染
let arr = [{
  img: '漫画/2019022216011312601.jpg', masks: '添酒', as: 'https://ys.mihoyo.com/main/manga/detail/191?mute=1'
},
{
  img: '漫画/2019060316251096474.jpg', masks: '炎生', as: 'https://ys.mihoyo.com/main/manga/detail/192?mute=1'
},
{
  img: '漫画/2019030116173638816.jpg', masks: '失物', as: 'https://ys.mihoyo.com/main/manga/detail/198?mute=1'
},
{
  img: '漫画/2019060318381416927.jpg', masks: '变动', as: 'https://ys.mihoyo.com/main/manga/detail/429?mute=1'
},
{
  img: '漫画/2019060316192842647.jpg', masks: '险地', as: 'https://ys.mihoyo.com/main/manga/detail/438?mute=1'
},
{
  img: '漫画/2019060320042071824.jpg', masks: '风炎', as: 'https://ys.mihoyo.com/main/manga/detail/443?mute=1'
},
{
  img: '漫画/2019060619293196512.jpg', masks: '尘匣', as: 'https://ys.mihoyo.com/main/manga/detail/482?mute=1'
},
{
  img: '漫画/2019071514205278384.jpg', masks: '线索', as: 'https://ys.mihoyo.com/main/manga/detail/810?mute=1'
},
{
  img: '漫画/2019080920201725912.jpg', masks: '游宴', as: 'https://ys.mihoyo.com/main/manga/detail/917?mute=1'
},
{
  img: '漫画/2019090919255789106.jpg', masks: '愚戏', as: 'https://ys.mihoyo.com/main/manga/detail/987?mute=1'
},
{
  img: '漫画/2019101118561041414.jpg', masks: '蛇音', as: 'https://ys.mihoyo.com/main/manga/detail/1073?mute=1'
},
{
  img: '漫画/2019110819052956627.jpg', masks: '心雾', as: 'https://ys.mihoyo.com/main/manga/detail/3476?mute=1'
},
{
  img: '漫画/2019121219370494421.jpg', masks: '再临', as: 'https://ys.mihoyo.com/main/manga/detail/3756?mute=1'
},
{
  img: '漫画/2020011718393743302.jpg', masks: '顽疾', as: 'https://ys.mihoyo.com/main/manga/detail/6144?mute=1'
},
{
  img: '漫画/2020040312585640222.jpg', masks: '落定', as: 'https://ys.mihoyo.com/main/manga/detail/6477?mute=1'
},
{
  img: '漫画/2020041715102690915.jpg', masks: '添酒', as: 'https://ys.mihoyo.com/main/manga/detail/6530?mute=1'
},


]

let arr1 = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五', '十六']
arr.sort(function() {
  return Math.random() - 0.5;
});
let btn = document.querySelector('button');

let res = document.querySelector('ul')
function fn() {
  res.innerHTML = arr.map((item, index) => {
    let { img, masks, as } = item
    return `
    <li>
        <a href="${as}">
          <img src="${img}" alt="">
          <div class="mask">第${arr1[index]}话 ${masks}</div>
        </a>

      </li>
    `
  }).join('')
}
fn()











// 放大效果
const img = document.querySelectorAll(".two img");
img.forEach(item => {
  item.style.overflow = "hidden";
  item.addEventListener("mouseenter", () => {
    item.style.transition = "transform 0.3s ease-in-out";
    item.style.transform = "scale(1.2)";
  });
  item.addEventListener("mouseleave", () => {
    item.style.transition = "transform 0.3s ease-in-out";
    item.style.transform = "scale(1)";
  });
});



window.addEventListener('load', function () {
  //导航区
  let audiu_on = document.getElementById('audiu_on')

  let audio_off = this.document.getElementById('audio_off')
  //音频播放
  let audioyuans = document.getElementById("bgMusic");
  audiu_on.addEventListener('click', () => {
    audio_off.style.display = 'block'
    audioyuans.pause();
    audioyuans.currentTime = 0;

  })
  audio_off.addEventListener('click', () => {
    audio_off.style.display = 'none'
    audioyuans.play();

  })
})








const loginBtn = document.getElementById('login-btn');
const mask = document.getElementById('mask');
const loginBox = document.getElementById('login-box');
const closeBtn = document.getElementById('close-btn');

// 点击登录按钮显示遮罩层和登录弹框
loginBtn.addEventListener('click', () => {
  mask.style.display = 'block';
  loginBox.style.display = 'block';
});

// 点击关闭按钮隐藏遮罩层和登录弹框
closeBtn.addEventListener('click', () => {
  mask.style.display = 'none';
  loginBox.style.display = 'none';
});

